Day 4 CSS Challenge The Pyramide - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 3

0

自我挑戰組

30 Day CSS Challenge系列第 5 篇

Day 4 CSS Challenge The Pyramide

16th鐵人賽 css

2024-09-21 22:27:00

81 瀏覽

分享至

https://codepen.io/ericcai/pen/rNXBpLP

在第四天的挑戰中，我們要來製作一個充滿視覺效果的金字塔場景，包括閃爍的星星、動態的太陽、陰影效果以及背景色彩的變化。

主要技術點

自定義 CSS 變數：利用 :root 中的自定義變數來控制場景中各元素的大小、高度以及動畫的時長，這使得調整整體設計變得更加靈活和集中管理。
CSS3 animation 與 keyframes：通過 @keyframes 設計各種動畫效果，如太陽的旋轉、金字塔的陰影變化、背景色的漸變以及星星的閃爍，增強了場景的動態感。
動態生成元素：使用 JS 在頁面載入後動態生成星星，並隨機設定其位置、大小和動畫延遲，小星星的效果。
Mix-blend-mode：使用 mix-blend-mode 來混合不同元素的顏色，創造出更豐富的視覺層次感。
具體挑戰內容

這次挑戰讓我深入了解了 CSS3 動畫的強大功能，並學會了如何結合 JavaScript 來增強網頁的互動性和動態效果，Day 4 的難易度我給 4/5 分~

Day 3 CSS Challenge Menu Icon

系列文

30 Day CSS Challenge 共 5 篇

目錄

RSS系列文訂閱系列文

0 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙